<template>
  <div class="bond-container">
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form :inline="true" :model="searchData">
        <el-form-item label="用户名称">
          <el-input v-model="searchData.buyerName" maxlength="20" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据卡片 -->
    <el-row :gutter="20" class="data-cards">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="data-card">
          <div class="card-icon bg-blue">
            <i class="el-icon-money"></i>
          </div>
          <div class="card-content">
            <div class="card-title">保证金总额</div>
            <div class="card-value">¥{{ bondData.totalBond || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="data-card">
          <div class="card-icon bg-orange">
            <i class="el-icon-lock"></i>
          </div>
          <div class="card-content">
            <div class="card-title">冻结保证金</div>
            <div class="card-value">¥{{ bondData.frozenBond || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="data-card">
          <div class="card-icon bg-green">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="card-content">
            <div class="card-title">可用保证金</div>
            <div class="card-value">¥{{ bondData.unfrozenBond || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="data-card">
          <div class="card-icon bg-purple">
            <i class="el-icon-tickets"></i>
          </div>
          <div class="card-content">
            <div class="card-title">已使用保证金</div>
            <div class="card-value">¥{{ bondData.usedBond || 0 }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
      tooltip-effect="dark"
      :style="{ width: '100%' }"
      class="dataTable"
    >
      <el-table-column prop="buyerName" label="用户名称" show-overflow-tooltip />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="totalBond" label="保证金总额" />
      <el-table-column prop="frozenBond" label="冻结保证金" />
      <el-table-column prop="unfrozenBond" label="可用保证金" />
      <el-table-column prop="usedBond" label="已使用保证金" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="searchData.page"
      v-model:page-size="searchData.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { FinanceService } from '@/api/financeApi'
  import { ApiStatus } from '@/utils/http/status'
  import type { BondCount, BondParam } from '@/api/model/financeModel'

  // 表格相关
  const loading = ref({
    table: false
  })
  const tableData = ref<any[]>([])
  const total = ref(0)
  const bondData = ref<BondCount>({})

  // 搜索表单
  const searchData = reactive<BondParam & { page: number; pageSize: number }>({
    page: 1,
    pageSize: 10,
    buyerName: ''
  })

  // 获取保证金概况数据
  const getBondOverview = async () => {
    try {
      const res = await FinanceService.getAllBond({
        buyerName: searchData.buyerName,
        page: searchData.page,
        pageSize: searchData.pageSize
      })
      if (res.code === ApiStatus.success) {
        // 处理保证金概览数据
        bondData.value = {
          totalBond: res.data.total || 0,
          frozenBond: res.data.frozenBond || 0,
          unfrozenBond: res.data.unfrozenBond || 0,
          usedBond: res.data.usedBond || 0
        }
        // 处理表格数据和分页信息
        if (res.data.page && res.data.page.list) {
          tableData.value = res.data.page.list
          total.value = res.data.page.total || 0
        }
      } else {
        ElMessage.error(res.message || '获取保证金概况失败')
      }
    } catch (error) {
      console.error(error)
      ElMessage.error('获取保证金概况失败')
    }
  }

  // 获取保证金数据列表
  const getAll = async () => {
    loading.value.table = true
    try {
      await getBondOverview()
    } catch (error) {
      console.error(error)
      ElMessage.error('获取保证金数据失败')
    } finally {
      loading.value.table = false
    }
  }

  // 处理查询
  const search = () => {
    searchData.page = 1
    getAll()
  }

  // 重置搜索条件
  const reset = () => {
    searchData.buyerName = ''
    searchData.page = 1
    getAll()
  }

  // 处理分页
  const handleSizeChange = (val: number) => {
    searchData.pageSize = val
    getAll()
  }

  const handleCurrentChange = (val: number) => {
    searchData.page = val
    getAll()
  }

  // 初始化
  onMounted(() => {
    getAll()
  })
</script>

<style lang="scss" scoped>
  .bond-container {
    padding: 20px;
    background-color: #fff;

    .formSearch {
      margin-bottom: 20px;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }

    .data-cards {
      margin-bottom: 20px;
    }

    .data-card {
      display: flex;
      align-items: center;
      padding: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;

      .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
        color: #fff;
        font-size: 24px;

        &.bg-blue {
          background-color: #409eff;
        }

        &.bg-orange {
          background-color: #e6a23c;
        }

        &.bg-green {
          background-color: #67c23a;
        }

        &.bg-purple {
          background-color: #909399;
        }
      }

      .card-content {
        flex: 1;

        .card-title {
          font-size: 14px;
          color: #606266;
          margin-bottom: 5px;
        }

        .card-value {
          font-size: 20px;
          font-weight: bold;
          color: #303133;
        }
      }
    }

    .dataTable {
      margin-bottom: 20px;
    }
  }

  @media screen and (max-width: $device-phone) {
    .bond-container {
      padding: 10px;

      .formSearch {
        padding: 15px;

        :deep(.el-form-item) {
          margin-bottom: 15px;
        }
      }

      .data-card {
        padding: 15px;
        margin-bottom: 15px;

        .card-icon {
          width: 40px;
          height: 40px;
          font-size: 20px;
        }

        .card-content {
          .card-title {
            font-size: 13px;
          }

          .card-value {
            font-size: 18px;
          }
        }
      }
    }
  }
</style>
